<template>

    <div class="resume-container">
        <div class="table-head" :class='{loadUpload:loadUpload}'>
        	
        	干部任免审批表
			<el-upload
					v-if="xmlReport"
					:action='UploadUrl'
					:data = 'dataUpload'
			 	 	 style='float:right;margin-bottom:10px;text-align:right;'
					 :on-success='handleSuccess'
					>
					<el-button size="small" type="primary"><i class="fa fa-cloud-upload" style="margin-right:3px;"></i>导入</el-button>
				<div slot="tip" class="el-upload__tip">上传文件不能超过10MB</div>
			</el-upload>
        	<a v-if="xmlReport" :href="downLoadTable" class="downloadTable"><i class="fa fa-cloud-download" style="margin-right:3px;"></i>导出</a>

			
        </div>

        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td colspan="2" width="10%">姓&nbsp;名</td>
                    <td width="15%">{{info[0].name}}</td>
                    <td width="10%">性&nbsp;别</td>
                    <td width="15%">{{info[0].sex_descr}}</td>
                    <td width="15%">出生年月<br>(岁)</td>
                    <td width="15%">{{info[0].birthdate | handleDate}}<br><span v-if="info[0].birthdate && info[0].birthdate.trim()">{{info[0].birthdate | calculateAge}}(岁)</span></td>
                    <td width="20%" rowspan="4">
                        <img v-if="srcImg" :src="srcImg" alt=""  width="100%" class="form-photo">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">民&nbsp;族</td>
                    <td>{{info[0].ethnic_grp}}</td>
                    <td>籍&nbsp;贯</td>
                    <td>{{info[0].native_place_chn}}</td>
                    <td>出 生 地</td>
                    <td>{{info[0].birthplace}} </td>
                </tr>
                <tr>
                    <td colspan="2">入&nbsp;党<br>时&nbsp;间</td>
                    <td> {{summary.c_party_time | handleDate}}</td>
                    <td>参加工<br>作时间</td>
                    <td>{{summary.c_work_time | handleDate}} </td>
                    <td>健康状况</td>
                    <td>{{summary.c_health_descr}} </td>
                </tr>
                <tr>
                    <td colspan="2">专业技<br>术职务</td>
                    <td colspan="2">{{summary.c_tech_position}} </td>
                    <td>熟悉专业<br>有何专长</td>
                    <td colspan="2">{{summary.c_profesol_spec}} </td>
                </tr>
                <tr>
                    <td colspan="2" rowspan="2">学&nbsp;历<br>学&nbsp;位</td>
                    <td>全日制<br>教&nbsp;育</td>
                    <td colspan="2">
                        {{summary.c_ful_edu_desc}}<br/>
                    	{{summary.c_ful_edu_deg}}
                    </td>
                    <td>毕业院校<br>系及专业</td>
                    <td colspan="2" class="align-left">      
                        {{summary.c_ful_edu_school}}<br/>{{summary.c_ful_edu_major}}
                    </td>
                </tr>
                <tr>
                    <td>在&nbsp;职<br>教&nbsp;育</td>
                    <td colspan="2">
                        {{summary.c_wrk_edu_desc}}<br/>
                        {{summary.c_wrk_edu_deg}}
                    </td>
                    <td>毕业院校<br>系及专业</td>
                    <td colspan="2" class="align-left">
                        {{summary.c_wrk_edu_school}}<br/>{{summary.c_wrk_edu_major}}
                    </td>
                </tr>
                <tr>
                    <td colspan="3">现&nbsp;任&nbsp;职&nbsp;务</td>
                    <td colspan="5" class="align-left"> 
                        {{summary.c_current_job}}
                    </td>
                </tr>
                <tr>
                    <td colspan="3">拟&nbsp;任&nbsp;职&nbsp;务</td>
                    <td colspan="5" class="align-left">
                        {{summary.c_intended_job}}
                     </td>
                </tr>
                <tr>
                    <td colspan="3">拟&nbsp;免&nbsp;职&nbsp;务</td>
                    <td colspan="5" class="align-left"> 
                        {{summary.c_inte_remov_job}}
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-bordered">
            <tbody><tr>
                <td >简<br><br><br><br>历</td>
                <td colspan="6" class="align-left vertical-align-top">
                    <!--{{repeatResume(personResumeInfo.exresume)}}<br/>-->
                    <!--<ul>
                        <li style="clear:both;line-height:40px;" v-for="(value,index) in personResumeInfo.exresume" :key="index">
                            <div style="float:left;width:150px">{{(value.c_begin_dt_desc || '') +'&nbsp;-&nbsp;' + (value.c_end_dt_desc || '') }}</div>
                            <div style="float:left">{{(value.comments || '')}}</div>
                        </li>
                    </ul>-->
                 
                    <div v-html="summary.c_leader_resume" style="line-height:28px;font-size:14px;padding:0px 10px 28px 10px;">

                    </div>
                </td>
            </tr>
            <tr>
                <td>奖<br>惩<br>情<br>况</td>
                <td colspan="6" class="align-left">
                	<div v-html="summary.c_rewrd_punish" style="line-height:28px;font-size:14px;">
                		
                	</div>
    
                </td>
            </tr>
            <tr>
                <td>年核<br>度结<br>考果</td>
                <td colspan="6" class="align-left">
                    {{summary.c_anual_exam_reslt}}
                </td>
            </tr>
            <tr>
                <td>任<br>免<br>理<br>由</td>
                <td colspan="6" class="align-left">

                </td>
            </tr>
            
            <tr>
                <td width="7%" rowspan="8">家<br>庭<br>主<br>要<br>成<br>员<br>及<br>重<br>要<br>社<br>会<br>关<br>系</td>
                <td width="15%">称谓</td>
                <td width="15%">姓名</td>
                <td width="5%">年龄</td>
                <td width="8%">政&nbsp;治<br>面&nbsp;貌</td>
                <td width="50%" colspan="2">工作单位及职务</td>
            </tr>
            <tr v-for="relationItem in relation" :key="relationItem.id">
                
                    <td>{{relationItem.c_relship_desc}}</td>
                    <td>{{relationItem.name}}</td>
                    <td >{{relationItem.age | calculateAge}}</td>
                    <td>{{relationItem.c_political_sta}}</td>
                    <td colspan="2" class="align-left">{{relationItem.c_work_unit_job}}</td>
                
            </tr>
            <tr v-for="(relationItem,index) in relationWhite" :key="index">
                    <td>&nbsp;</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td colspan="2"></td>
                
            </tr>
         
            <tr>
                <td>呈<br>报<br>单<br>位</td>
                <td colspan="6">
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <p class="align-right">{{new Date().getFullYear()}} 年 {{new Date().getMonth() + 1}} 月 {{new Date().getDate()}} 日</p>
                </td>
            </tr>
            <tr>
                <td>审意<br>批&nbsp;<br>机&nbsp;<br>关见</td>
                <td colspan="4">
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <p class="align-right">（盖章）</p>
                    <p class="align-right">年&nbsp;&nbsp;月&nbsp;&nbsp;日</p>
                </td>
                <td width="7%">行任<br>政免<br>机意<br>关见</td>
                <td>
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <p class="align-right">（盖章）</p>
                    <p class="align-right">年&nbsp;&nbsp;月&nbsp;&nbsp;日</p>
                </td>
            </tr>
            <tr>
                <td colspan="7" class="align-left" style="border-color: transparent;">填表人：</td>
            </tr>
         </tbody>
        </table>
    </div>



</template>
<script>
import Vue from 'vue'
import { Upload, Message } from 'element-ui'
import { _decode } from '@/common/js/handleCode'

Vue.use(Upload)
export default {
	name: 'resume',
	data () {
		return {
			personResumeInfo: null,
			summary: {},
			info: [{}],
			work: null,
			workWhite: null,
			workLength: null,
			edu: null,
			eduWhite: null,
			relation: null,
			relationWhite: null,
			certificate: null,
			certificateWhite: null,
			col: 5,
			loadUpload: false,
			text: null,
			xmlReport: false,
			params: {}
		}
	},

	computed: {
		srcImg() {
			if(this.params.emplid){
				return this.Axios.baseURI + this.URL.getEmployeeImgNew.url + '?emplid=' + this.params.emplid + '&sex=' + this.params.sex + '&token=' + localStorage.getItem('token')
			}
			return ''
		},
		UploadUrl: function () {

			return this.Axios.baseURI + this.URL.getUploadFile.url
		},
		dataUpload: function () {
			var info = this.info[0] || {}
			return {
				name: info.name,
				emplid: this.params.emplid,
				token: localStorage.getItem('token')
			}
		},
		downLoadTable: function () {
			return this.Axios.baseURI + this.URL.getAppointRemoveByEmplid.url + '?emplid=' + this.params.emplid + '&token=' + localStorage.getItem('token')
		}
	},

	filters: {
		handleDate: function (value) {
			if (!value) { return }
			if (value.trim().length <= 7) {
				return value
			}
			return value.split(' ')[0].split('-')[0] + '.' + value.split(' ')[0].split('-')[1]
		},
		calculateAge: function (value) {
			if (!value) {
				return
			}

			if (value.trim().length <= 4) {
				return value
			}
			var res = value.split(' ')[0]

			return new Date().getFullYear() - new Date(res).getFullYear()
		},
		handleWorkTime: function (value) {
			if (!value) {
				return
			}
			return value.split(' ')[0]
		}
	},

	methods: {

		setParam () {
			const urlParam = window.location.search.split('?')[1]
			urlParam && (this.params = JSON.parse(_decode(urlParam)))
		},

		repeatResume: function (arr) {
			var str = ''
			for (var i = 0; i < arr.length; i++) {
				str += (arr[i].c_begin_dt_desc || '') + '-' + (arr[i].c_end_dt_desc || '') + (arr[i].comments || '')
			}
			console.log(str)
			return str

		},
		handleSuccess: function (response) {

			var message = response.message
			this.loadUpload = true
			if (response.status == '1') {
				Message({
					type: 'success',
					message: '导入成功'
				})
				setTimeout(function () {
					location.reload()
				}, 800)
			} else {
				Message({
					type: 'error',
					message: message
				})
			}

			//          	
		},

		getBaseInfo () {
			let emplid = this.params.emplid
			this.Axios.Post(this.URL.listAppointOrRemoveForm.url, { emplid })
				.then((res) => {
					var personResumeInfo = typeof res.data === 'string' ? JSON.parse(res.data).datas : res.data.datas

					if (!personResumeInfo) {
						return
					}

					this.xmlReport = personResumeInfo.xmlReport

					this.personResumeInfo = personResumeInfo

					personResumeInfo.summary && (this.summary = personResumeInfo.summary[0])

					this.info = JSON.parse(JSON.stringify(personResumeInfo.info))

					this.relation = JSON.parse(JSON.stringify(personResumeInfo.relation))

					if (this.relation.length < 7) {
						this.relationWhite = new Array(7 - this.relation.length)
					}

				})
		}
	},
	mounted () {
		this.setParam()
		this.getBaseInfo ()
	}


}
</script>


<style>
@charset "UTF-8";
.el-upload-cover__title,
.el-upload-list__item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-progress-bar__inner:after,
.el-upload-cover:after,
.el-upload-list--picture-card .el-upload-list__item-actions:after {
  display: inline-block;
  content: '';
  height: 100%;
  vertical-align: middle;
}
.el-progress {
  position: relative;
  line-height: 1;
}
.el-progress.is-exception .el-progress-bar__inner {
  background-color: #ff4949;
}
.el-progress.is-exception .el-progress__text {
  color: #ff4949;
}
.el-progress.is-success .el-progress-bar__inner {
  background-color: #13ce66;
}
.el-progress.is-success .el-progress__text {
  color: #13ce66;
}
.el-progress__text {
  font-size: 14px;
  color: #48576a;
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  line-height: 1;
}
.el-progress__text i {
  vertical-align: middle;
  display: block;
}
.el-progress--circle {
  display: inline-block;
}
.el-progress--circle .el-progress__text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  margin: 0;
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.el-progress--circle .el-progress__text i {
  vertical-align: middle;
  display: inline-block;
}
.el-progress--without-text .el-progress__text {
  display: none;
}
.el-progress--without-text .el-progress-bar {
  padding-right: 0;
  margin-right: 0;
  display: block;
}
.el-progress--text-inside .el-progress-bar {
  padding-right: 0;
  margin-right: 0;
}
.el-progress-bar {
  padding-right: 50px;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  margin-right: -55px;
  box-sizing: border-box;
}
.el-progress-bar__outer {
  height: 6px;
  border-radius: 100px;
  background-color: #e4e8f1;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
}
.el-progress-bar__inner {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #20a0ff;
  text-align: right;
  border-radius: 100px;
  line-height: 1;
  white-space: nowrap;
}
.el-progress-bar__innerText {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  font-size: 12px;
  margin: 0 5px;
}
@keyframes progress {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 32px 0;
  }
}
.el-upload {
  display: inline-block;
  text-align: center;
  cursor: pointer;
}
.el-upload iframe {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
}
.el-upload__input {
  display: none;
}
.el-upload__tip {
  font-size: 12px;
  color: #8391a5;
  margin-top: 7px;
}
.el-upload--picture-card {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  cursor: pointer;
  line-height: 146px;
  vertical-align: top;
}
.el-upload--picture-card i {
  font-size: 28px;
  color: #8c939d;
}
.el-upload--picture-card:hover {
  border-color: #20a0ff;
  color: #20a0ff;
}
.el-upload-dragger {
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  box-sizing: border-box;
  width: 360px;
  height: 180px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.el-upload-dragger .el-upload__text {
  color: #97a8be;
  font-size: 14px;
  text-align: center;
}
.el-upload-dragger .el-upload__text em {
  color: #20a0ff;
  font-style: normal;
}
.el-upload-dragger .el-icon-upload {
  font-size: 67px;
  color: #97a8be;
  margin: 40px 0 16px;
  line-height: 50px;
}
.el-upload-dragger + .el-upload__tip {
  text-align: center;
}
.el-upload-dragger ~ .el-upload__files {
  border-top: 1px solid rgba(191, 203, 217, 0.2);
  margin-top: 7px;
  padding-top: 5px;
}
.el-upload-dragger:hover {
  border-color: #20a0ff;
}
.el-upload-dragger.is-dragover {
  background-color: rgba(32, 159, 255, 0.06);
  border: 2px dashed #20a0ff;
}
.el-upload-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.el-upload-list.is-disabled
  .el-upload-list__item:hover
  .el-upload-list__item-status-label {
  display: block;
}
.el-upload-list__item {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  font-size: 14px;
  color: #48576a;
  line-height: 1.8;
  margin-top: 5px;
  box-sizing: border-box;
  border-radius: 4px;
  width: 100%;
  position: relative;
}
.el-upload-list__item .el-progress-bar {
  margin-right: 0;
  padding-right: 0;
}
.el-upload-list__item .el-progress {
  position: absolute;
  top: 20px;
  width: 100%;
}
.el-upload-list__item .el-progress__text {
  position: absolute;
  top: -13px;
  right: 0;
}
.el-upload-list__item:first-child {
  margin-top: 10px;
}
.el-upload-list__item .el-icon-upload-success {
  color: #13ce66;
}
.el-upload-list__item .el-icon-close {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  opacity: 0.75;
  color: #48576a;
  -ms-transform: scale(0.7);
  transform: scale(0.7);
}
.el-upload-list__item .el-icon-close:hover {
  opacity: 1;
}
.el-upload-list__item:hover {
  background-color: #eef1f6;
}
.el-upload-list__item:hover .el-icon-close {
  display: inline-block;
}
.el-upload-list__item:hover .el-progress__text {
  display: none;
}
.el-upload-list__item.is-success .el-upload-list__item-status-label {
  display: block;
}
.el-upload-list__item.is-success .el-upload-list__item-name:hover {
  color: #20a0ff;
  cursor: pointer;
}
.el-upload-list__item.is-success:hover .el-upload-list__item-status-label {
  display: none;
}
.el-upload-list__item-name {
  color: #48576a;
  display: block;
  margin-right: 40px;
  padding-left: 4px;
  transition: color 0.3s;
}
.el-upload-list__item-name [class^='el-icon'] {
  color: #97a8be;
  margin-right: 7px;
  height: 100%;
  line-height: inherit;
}
.el-upload-list__item-status-label {
  position: absolute;
  right: 5px;
  top: 0;
  line-height: inherit;
  display: none;
}
.el-upload-list__item-delete {
  position: absolute;
  right: 10px;
  top: 0;
  font-size: 12px;
  color: #48576a;
  display: none;
}
.el-upload-list__item-delete:hover {
  color: #20a0ff;
}
.el-upload-list--picture-card {
  margin: 0;
  display: inline;
  vertical-align: top;
}
.el-upload-list--picture-card .el-upload-list__item {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  margin: 0 8px 8px 0;
  display: inline-block;
}
.el-upload-list--picture-card .el-upload-list__item .el-icon-check,
.el-upload-list--picture-card .el-upload-list__item .el-icon-circle-check {
  color: #fff;
}
.el-upload-list--picture-card .el-upload-list__item .el-icon-close,
.el-upload-list--picture-card
  .el-upload-list__item:hover
  .el-upload-list__item-status-label {
  display: none;
}
.el-upload-list--picture-card .el-upload-list__item:hover .el-progress__text {
  display: block;
}
.el-upload-list--picture-card .el-upload-list__item-name {
  display: none;
}
.el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 100%;
  height: 100%;
}
.el-upload-list--picture-card .el-upload-list__item-status-label {
  position: absolute;
  right: -15px;
  top: -6px;
  width: 40px;
  height: 24px;
  background: #13ce66;
  text-align: center;
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
}
.el-upload-list--picture-card .el-upload-list__item-status-label i {
  font-size: 12px;
  margin-top: 11px;
  -ms-transform: rotate(-45deg) scale(0.8);
  transform: rotate(-45deg) scale(0.8);
}
.el-upload-list--picture-card .el-upload-list__item-actions {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  cursor: default;
  text-align: center;
  color: #fff;
  opacity: 0;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s;
}
.el-upload-list--picture-card .el-upload-list__item-actions span {
  display: none;
  cursor: pointer;
}
.el-upload-list--picture-card .el-upload-list__item-actions span + span {
  margin-left: 15px;
}
.el-upload-list--picture-card
  .el-upload-list__item-actions
  .el-upload-list__item-delete {
  position: static;
  font-size: inherit;
  color: inherit;
}
.el-upload-list--picture-card .el-upload-list__item-actions:hover {
  opacity: 1;
}
.el-upload-list--picture-card .el-upload-list__item-actions:hover span {
  display: inline-block;
}
.el-upload-list--picture-card .el-progress {
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  bottom: auto;
  width: 126px;
}
.el-upload-list--picture-card .el-progress .el-progress__text {
  top: 50%;
}
.el-upload-list--picture .el-upload-list__item {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  margin-top: 10px;
  padding: 10px 10px 10px 90px;
  height: 92px;
}
.el-upload-list--picture .el-upload-list__item .el-icon-check,
.el-upload-list--picture .el-upload-list__item .el-icon-circle-check {
  color: #fff;
}
.el-upload-list--picture
  .el-upload-list__item:hover
  .el-upload-list__item-status-label {
  background: 0 0;
  box-shadow: none;
  top: -2px;
  right: -12px;
}
.el-upload-list--picture .el-upload-list__item:hover .el-progress__text {
  display: block;
}
.el-upload-list--picture
  .el-upload-list__item.is-success
  .el-upload-list__item-name {
  line-height: 70px;
  margin-top: 0;
}
.el-upload-list--picture
  .el-upload-list__item.is-success
  .el-upload-list__item-name
  i {
  display: none;
}
.el-upload-list--picture .el-upload-list__item-thumbnail {
  vertical-align: middle;
  display: inline-block;
  width: 70px;
  height: 70px;
  float: left;
  position: relative;
  z-index: 1;
  margin-left: -80px;
}
.el-upload-list--picture .el-upload-list__item-name {
  display: block;
  margin-top: 20px;
}
.el-upload-list--picture .el-upload-list__item-name i {
  font-size: 70px;
  line-height: 1;
  position: absolute;
  left: 9px;
  top: 10px;
}
.el-upload-list--picture .el-upload-list__item-status-label {
  position: absolute;
  right: -17px;
  top: -7px;
  width: 46px;
  height: 26px;
  background: #13ce66;
  text-align: center;
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0 1px 1px #ccc;
}
.el-upload-list--picture .el-upload-list__item-status-label i {
  font-size: 12px;
  margin-top: 12px;
  -ms-transform: rotate(-45deg) scale(0.8);
  transform: rotate(-45deg) scale(0.8);
}
.el-upload-list--picture .el-progress {
  position: relative;
  top: -7px;
}
.el-upload-cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 10;
  cursor: default;
}
.el-upload-cover img {
  display: block;
  width: 100%;
  height: 100%;
}
.el-upload-cover + .el-upload__inner {
  opacity: 0;
  position: relative;
  z-index: 1;
}
.el-upload-cover__label {
  position: absolute;
  right: -15px;
  top: -6px;
  width: 40px;
  height: 24px;
  background: #13ce66;
  text-align: center;
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
}
.el-upload-cover__label i {
  font-size: 12px;
  margin-top: 11px;
  -ms-transform: rotate(-45deg) scale(0.8);
  transform: rotate(-45deg) scale(0.8);
  color: #fff;
}
.el-upload-cover__progress {
  display: inline-block;
  vertical-align: middle;
  position: static;
  width: 243px;
}
.el-upload-cover__progress + .el-upload__inner {
  opacity: 0;
}
.el-upload-cover__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.el-upload-cover__interact {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.72);
  text-align: center;
}
.el-upload-cover__interact .btn {
  display: inline-block;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  vertical-align: middle;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.1s,
    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.1s;
  margin-top: 60px;
}
.el-upload-cover__interact .btn span {
  opacity: 0;
  transition: opacity 0.15s linear;
}
.el-upload-cover__interact .btn:not(:first-child) {
  margin-left: 35px;
}
.el-upload-cover__interact .btn:hover {
  -ms-transform: translateY(-13px);
  transform: translateY(-13px);
}
.el-upload-cover__interact .btn:hover span {
  opacity: 1;
}
.el-upload-cover__interact .btn i {
  color: #fff;
  display: block;
  font-size: 24px;
  line-height: inherit;
  margin: 0 auto 5px;
}
.el-upload-cover__title {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
  height: 36px;
  width: 100%;
  font-weight: 400;
  text-align: left;
  padding: 0 10px;
  margin: 0;
  line-height: 36px;
  font-size: 14px;
  color: #48576a;
}
</style>



<style scoped>
.resume-container .table-head {
  font-size: 24px;
  text-align: center;
  margin: 20px 0px 20px 0px;
}
.resume-container .table-head .btn-download {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
  color: #fff;
  background-color: #5bc0de;
  border-color: #46b8da;
}

.resume-container {
  width: 86%;
  max-width: 1000px;
  margin: auto;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #333;
  background-color: #fff;
}
.resume-container .form-photo {
  vertical-align: middle;
}
.resume-container .table tbody tr td {
  text-align: center;
  vertical-align: middle;
  font-size: 14px;
  font-family: 宋体;
  padding: 2px 5px 2px 5px;
  height: 40px;
}
.resume-container .table-bordered {
  border: 1px solid #ddd;
}
.resume-container .table {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
}
.resume-container .table-bordered td {
  border: 1px solid #ddd;
}
.resume-container .table .label-bold {
  font-weight: bold;
}
.resume-container .table .align-right {
  text-align: right;
  padding-right: 30px;
}
.resume-container .table p {
  line-height: 30px;
  margin: 0 0 10px;
}

.resume-container .table tbody tr td {
  text-align: center;
  vertical-align: middle;
  font-family: 宋体;
  word-break: break-all;
}
.resume-container .table .align-left {
  text-align: left;
}
.resume-container .table > thead > tr > th,
.table > tbody > tr > th,
.resume-container .table > tfoot > tr > th,
.table > thead > tr > td,
.resume-container .table > tbody > tr > td,
.resume-container .table > tfoot > tr > td {
  border-top: 1px solid #ddd;
}
</style>
<style>
.resume-container .submit-item {
  padding-bottom: 20px;
  .el-button {
    position: absolute;
    top: -20px;
    left: 20%;
    transform: scale(1.1) translateX(-70%);
  }
}
.resume-container .loadUpload .el-upload-list {
  display: none;
}
.el-upload__tip {
  display: none;
}
.resume-container .el-button--small {
  font-size: 14px;
  vertical-align: top;
}

.resume-container .el-upload__input {
  display: none;
}

.resume-container a.downloadTable {
  display: inline-block;
  padding: 0 15px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  vertical-align: bottom;
  float: right;
  background-color: #18a689;
  color: #fff;
  border-radius: 4px;
  margin-right: 8px;
}

html body {
  background: #fff !important;
}
</style>
<style>
.resume-container .table {
  overflow: auto;
}
</style>

